<!-- 前台店长 – 首页 – 打卡 – 统计 – 3 		 report -->
<template>
	<view class="warps">
		<view class="punch-daka">
			<view class="w90 p_t_31">
				<view class=" f b c">
					<view>
						<text>选择报表</text>
					</view>
					<view class="vw20 f b c">
						<text>月度汇总</text>
						<image style="width: 24rpx;height: 24rpx;" src="../../../../static/img/028.png" mode=""></image>
					</view>
				</view>
				<view class="quanxian m_t_30"></view>
			</view>
			<view class="w90 p_t_10">
				<view class=" f b c">
					<view>
						<text>开始日期</text>
					</view>
					<view class="vw25 f b c">
						<text>2020/05/01</text>
						<image style="width: 24rpx;height: 24rpx;" src="../../../../static/img/028.png" mode=""></image>
					</view>
				</view>
				<view class="quanxian m_t_30"></view>
			</view>
			<view class="w90 p_t_10">
				<view class=" f b c">
					<view>
						<text>结束日期</text>
					</view>
					<view class="vw25 f b c">
						<text>2021/05/15</text>
						<image style="width: 24rpx;height: 24rpx;" src="../../../../static/img/028.png" mode=""></image>
					</view>
				</view>
				<view class="quanxian m_t_30"></view>
			</view>
			<view class="w90 p_t_10">
				<view class=" f b c">
					<view>
						<text>人员范围</text>
					</view>
					<view class="vw45 f b c tac">
						<view class="report-bai" :class="[type==1?'ys':'']" @click="swit(1)">全公司</view>
						<view class="report-bai" :class="[type==2?'ys':'']" @click="swit(2)">前台</view>
						<view class="report-bai" :class="[type==3?'ys':'']" @click="swit(3)">教练</view>
					</view>
				</view>
			</view>
		</view>
		<view class="w90 p_t_20" @click="aa">
			<text>查看导出记录</text>
		</view>
		<view class="teaching-but" @click="daochu()">
			<button type="default">导出报告</button>
		</view>
		<view>
			<view class="cover" v-show="show">

			</view>
			<view class="Details-huod" v-show="show">
				<view class="w90s">
					<view class="vw30 f b c" style="margin-left:180rpx;margin-top:20rpx;">
						<view>
							<text>请选择</text>
						</view>
						<view>
							<image @click="show = false" style="width: 20rpx;height: 20rpx;"
								src="../../../../static/img/100.png" mode=""></image>
						</view>
					</view>
					<view class="quanxian"></view>
					<view class="w90s f b c p_t_31">
						<view class="vw45 f b c">
							<text class="fs28 blue bold">月度汇总</text>
							<text class="fs16 hui">(员工每月考勤数据)</text>
						</view>
						<view>
							<image style="width: 24rpx;height: 24rpx;" src="../../../../static/img/101.png" mode="">
							</image>
						</view>
					</view>
					<view class="quanxian m_t_40"></view>
					<view class="w90s f b c p_t_31">
						<view class="vw45 f b c">
							<text class="fs28 bold">每日记录</text>
							<text class="fs16 hui">(员工每天打卡数据)</text>
						</view>
					</view>
					<view class="quanxian m_t_40"></view>
					<view class="w90s f b c p_t_31">
						<view class="vw45 f b c">
							<text class="fs28 bold">每日记录</text>
							<text class="fs16 hui">(员工每天打卡数据)</text>
						</view>
					</view>
					<view class="quanxian m_t_40"></view>
				</view>
				<view class="index-but" v-show="show">
					<button type="default" @click="ao">确定</button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				DC: 0, //  0:上课   1:课后
				show: false,
				type:1,
			}
		},
		onLoad() {
			// 动态导航条文字
			uni.setNavigationBarTitle({
				title: '考勤报表'
			})
		},
		methods: {
			DCs(e) {
				this.DC = e
			},
			ao() {
				uni.navigateTo({
					url: "../attendance/attendance"
				})
			},
			aa(){
				uni.navigateTo({
					url:"../../derived/derived"
				})
			},
			daochu() {
				this.show = true
			},
			swit(e) {
				let index = e
				this.type = index
			},
		}
	}
</script>

<style scoped>
	.cover {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100vh;
		background: #000000;
		opacity: 0.6;
		z-index: 10;
	}

	.Details-huod {
		width: 432rpx;
		height: 516rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 12rpx;
		position: absolute;
		top: 300rpx;
		left: 160rpx;
		z-index: 11;
	}

	.index-but {
		position: absolute;
		top: 440rpx;
		left: 20rpx;
		z-index: 11;
	}

	.index-but>button {
		width: 392rpx;
		height: 48rpx;
		opacity: 1;
		background: #1f73f2;
		border-radius: 8rpx;
		line-height: 48rpx;
		font-size: 28rpx;
		color: #fff;
	}

	.warps {
		height: 100vh;
		overflow: hidden;
		background-color: #F6F8FC;
	}

	.col {
		color: #1F73F2;
		background-color: #F1F6FF;
	}

	.bol {
		background: #ececec;
	}

	.punch-daka {
		width: 686rpx;
		height: 400rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
		margin: 0 auto;
		margin-top: 24rpx;
	}

	.report-lan {
		width: 120rpx;
		height: 42rpx;
		line-height: 42rpx;
		opacity: 1;
		background: #1f73f2;
		border-radius: 8rpx 0rpx 0rpx 8rpx;

	}

	.report-bai {
		width: 120rpx;
		height: 42rpx;
		line-height: 38rpx;
		opacity: 1;
		background: #ffffff;
		border: 2rpx solid #1f73f2;
		color: #1f73f2;
	}

	.report-bais {
		width: 120rpx;
		height: 42rpx;
		line-height: 36rpx;
		opacity: 1;
		background: #ffffff;
		border: 2rpx solid #1f73f2;
		border-radius: 0rpx 8rpx 8rpx 0rpx;
	}

	.teaching-but {
		margin: 0 auto;
		margin-top: 300rpx;
	}

	.teaching-but>button {
		width: 686rpx;
		height: 72rpx;
		line-height: 72rpx;
		opacity: 1;
		background: #1f73f2;
		border-radius: 12rpx;
		font-size: 24rpx;
		color: #ffffff;
	}

	.ys {
		background-color: #1f73f2;
		;
		color: #FFFFFF;
	}
</style>
